﻿<Page
    x:Class="HoloDeveloper.HubPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HoloDeveloper"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    d:DataContext="{Binding Source={d:DesignData Source=../HoloDeveloper.Shared/DataModel/SampleData.json, Type=data:SampleDataSource}}"
    xmlns:data="using:HoloDeveloper.Data"
    mc:Ignorable="d">

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <ImageBrush x:Key="HubBackgroundImageBrush" ImageSource="Assets/HubBackground.png"/>
                </ResourceDictionary>
                <ResourceDictionary x:Key="HighContrast">
                    <ImageBrush x:Key="HubBackgroundImageBrush" ImageSource="{x:Null}"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>

            <DataTemplate x:Key="HubSectionHeaderTemplate">
                <TextBlock Margin="0,0,0,-9.5" Text="{Binding}"/>
            </DataTemplate>

            <!-- Grid-appropriate item template as seen in section 2 -->
            <DataTemplate x:Key="Standard200x180TileItemTemplate">
                <Grid Margin="0,0,9.5,9.5" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                    <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="138.5" Width="138.5"/>
                    <TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="9.5,0,0,6.5" Style="{ThemeResource BaseTextBlockStyle}"/>
                </Grid>
            </DataTemplate>

            <DataTemplate x:Key="StandardTripleLineItemTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,9.5,0,0" Grid.Column="0" HorizontalAlignment="Left">
                        <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="79" Width="79"/>
                    </Border>
                    <StackPanel Grid.Column="1" Margin="14.5,0,0,0">
                        <TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}"/>
                        <TextBlock Text="{Binding Description}" Style="{ThemeResource ListViewItemContentTextBlockStyle}" Foreground="{ThemeResource PhoneMidBrush}" />
                        <TextBlock Text="{Binding Subtitle}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />
                    </StackPanel>
                </Grid>
            </DataTemplate>

            <DataTemplate x:Key="StandardDoubleLineItemTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,9.5,0,0" Grid.Column="0" HorizontalAlignment="Left">
                        <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="79" Width="79"/>
                    </Border>
                    <StackPanel Grid.Column="1" Margin="14.5,0,0,0">
                        <TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}"/>
                        <TextBlock Text="{Binding Subtitle}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </Page.Resources>

    <Grid x:Name="LayoutRoot">
        <Hub x:Name="Hub" x:Uid="Hub" Header="application name" Background="{ThemeResource HubBackgroundImageBrush}">
            <HubSection x:Uid="HubSection1" Header="SECTION 1" DataContext="{Binding Groups}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
                <DataTemplate>
                    <ListView
                        ItemsSource="{Binding}"
                        IsItemClickEnabled="True"
                        ItemClick="GroupSection_ItemClick"
                        ContinuumNavigationTransitionInfo.ExitElementContainer="True">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="0,0,0,27.5">
                                    <TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
                                </StackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </DataTemplate>
            </HubSection>

            <HubSection x:Uid="HubSection2" Header="SECTION 2" Width="Auto"
                         DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
                <DataTemplate>
                    <GridView
                        Margin="0,9.5,0,0"
                        ItemsSource="{Binding Items}"
                        AutomationProperties.AutomationId="ItemGridView"
                        AutomationProperties.Name="Items In Group"
                        ItemTemplate="{StaticResource Standard200x180TileItemTemplate}"
                        SelectionMode="None"
                        IsItemClickEnabled="True"
                        ItemClick="ItemView_ItemClick"
                        ContinuumNavigationTransitionInfo.ExitElementContainer="True">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </DataTemplate>
            </HubSection>

            <HubSection x:Uid="HubSection3" Header="SECTION 3"
                        DataContext="{Binding Groups[1]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
                <DataTemplate>
                    <ListView 
                        AutomationProperties.AutomationId="ItemListViewSection3"
                        AutomationProperties.Name="Items In Group"
                        SelectionMode="None"
                        IsItemClickEnabled="True"
                        ItemsSource="{Binding Items}"
                        ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
                        ItemClick="ItemView_ItemClick"
                        ContinuumNavigationTransitionInfo.ExitElementContainer="True">
                    </ListView>
                </DataTemplate>
            </HubSection>

        </Hub>
    </Grid>
</Page>